<template>
    <view class="video_play">
        <image :src="videObject.img" mode="aspectFill"/>
        <!--工具栏 -->
         <view class="video_tool">
            <view  @click="handleSwitch" :class="['iconfont',muted?'icon-jinyin-copy':'icon-yinliang1']"></view>
            <view class="iconfont icon-zhuanfa">
                <button open-type="share"></button>
            </view>
         </view>
         <!-- 视频 -->
         <view class="video">
            <video :muted="muted" :src="videObject.video" objectFit="fill"></video>
         </view>
         <!-- 下载 -->
         <view class="video_btn">
             <view class="text" @click="handleDownLoad">下载高清</view>
         </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            videObject:{},
            muted:false
        }
    },
   onLoad(){
       this.videObject = getApp().globalData.video;
   },
   methods: {
    //开关声音
    handleSwitch(){
        this.muted = !this.muted;
    },
    // 下载视频
    async handleDownLoad(){
        await uni.showLoading({title:"下载中"});
        // 1.将远程文件下载到小程序内存中
        const {tempFilePath} = (await uni.downloadFile({url:this.videObject.video}))[1];
        // 2.将内存中的文件 下载到本地上
        await uni.saveVideoToPhotosAlbum({filePath:tempFilePath});
        uni.hideLoading();
        await uni.showToast({title:"下载成功"});
    }
   }
}
</script>

<style lang="scss" scoped>
    .video_play{
        position:relative;
        image{
            position:absolute;
            height:100vh;
            width:100vh;
            z-index:-1;
            filter:blur(20px);
        }
        .video_tool{
            height:80rpx;
            display:flex;
            justify-content:flex-end;
            margin-top:40rpx;
            .iconfont{
                width:80rpx;
                font-size:50rpx;
                color:#fff;
                background:rgba(0,0,0,.3);
                display:flex;
                justify-content: center;
                align-items: center;
                border-radius:40rpx;
                margin-right:20rpx;
            }
            .icon-zhuanfa{
                position:relative;
                button{
                    position:absolute;
                    height:100%;
                    width:100%;
                    opacity:0;
                }
            }
        }
        .video{
            display:flex;
            justify-content:center;
            margin:40rpx;
            video{
                width:360rpx;
                height:600rpx;
            }
        }
        .video_btn{
            display:flex;
            justify-content:center;
            .text{
                width:360rpx;
                height:80rpx;
                border-radius:40rpx;
                display:flex;
                justify-content:center;
                align-items:center;
                background:rgba(0,0,0,.3);
                color:#fff;
                font-size:30rpx;
                font-weight:600;
                border:2rpx solid #fff;
            }
        }
    } 
</style>